<template>
  <div>
    <div class='top' ref="top">
      <div class="tabbar">
        <div class="navli" @click="handleHomepage('/home/issus')">首页</div>
        <div class="navli">动态</div>
        <div class="navli">个人主页</div>
        <div class="navli">库</div>

        <div class="search">
          <input placeholder="搜索最新最热问题！" @keydown.enter="search" v-model="Keywords">
          <img src="../assets/search.png" @click="search">
        </div>
      </div>
    </div>
    <div class="contanier">
      <div class="left" ref="left">
        <div class='carContainer'>
          <el-carousel trigger="click" width="80px" class="carousel">
            <el-carousel-item class="el-carousel" v-for="(item, index) in imgArr" :key="index">
              <img :src="item.img" alt="">
            </el-carousel-item>
            <span class="carShadow">
              {{ imgArr && imgArr[infoIndex].info }}
            </span>
          </el-carousel>
        </div>
        <!-- 导航栏 -->
        <div class="bar">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                background-color="#DCDFE6">
                <el-menu-item index="0" @click="open">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">登录</span>
                </el-menu-item>
                <el-menu-item index="1" @click="handleHomepage('/home/issus')" v-if="!isAdmin">
                  <i class="el-icon-document-copy"></i>
                  <span slot="title">问题</span>
                </el-menu-item>
                <el-menu-item index="2" @click="handleHomepage('/home/project')" v-if="!isAdmin">
                  <i class="el-icon-folder-opened"></i>
                  <span slot="title">项目</span>
                </el-menu-item>
                <el-menu-item index="3" v-if="!isAdmin">
                  <i class="el-icon-copy-document" ></i>
                  <span slot="title">版本</span>
                </el-menu-item>
                <el-menu-item index="4" @click="handleHomepage('/home/team')" v-if="!isAdmin">
                  <i class="el-icon-user"></i>
                  <span slot="title">团队</span>
                </el-menu-item>
                <el-menu-item index="5" @click="handleHomepage('/home/userControl')" v-if="isAdmin">
                  <i class="el-icon-user"></i>
                  <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="6" @click="handleHomepage('/home/issusControl')" v-if="isAdmin">
                  <i class="el-icon-user"></i>
                  <span slot="title">错误信息管理</span>
                </el-menu-item>
                <el-menu-item index="7" @click="handleHomepage('/home/projectControl')" v-if="isAdmin">
                  <i class="el-icon-user"></i>
                  <span slot="title">项目管理</span>
                </el-menu-item>
                <el-menu-item index="8" @click="handleHomepage('/home/teamControl')" v-if="isAdmin">
                  <i class="el-icon-user"></i>
                  <span slot="title">团队管理</span>
                </el-menu-item>
                <el-menu-item index="9" @click="handleHomepage('/home/promission')" v-if="isAdmin">
                  <i class="el-icon-user"></i>
                  <span slot="title">权限管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="right">
        <router-view ref="route">
        </router-view>
      </div>
    </div>
    <!-- 登录组件 -->
    <Login :isShow=isShow @close="handleClose" />
    <!-- 蒙层 -->
    <div class="cover" v-if=isShow></div>
  </div>
</template>

<script>
import Img from '../assets/home/lbt1.png'
import Img1 from '../assets/home/lbt2.png'
import Img2 from '../assets/home/lbt3.png'
import Img3 from '../assets/home/lbt4.png'
import Login from '../components/login.vue'
import { GetProjectInfo } from '../api/HomeApi'

export default {
  mounted() {
    document.title = 'siren监控'
  },
  beforeDestroy() {
  },
  data() {
    return {
      intervalNum: null,
      infoIndex: 0,
      Keywords: '',
      isShow: false, // 控制打开登录弹窗
      isAdmin:localStorage.getItem('userLevel') === '0',
      // 图片数组
      imgArr: [
        { img: Img, info: "世界上最好的软件团队使用 CircleCI 自信地交付高质量的代码。" },
        { img: Img1, info: "创建自己的存储库并学习 miaochuu 用于创建和审查代码的拉取请求工作流程。" },
        { img: Img2, info: "用于通过 OpenAI 与 ChatGPT 的 API 交互的轻量级包。使用反向工程的官方 API。" },
        { img: Img3, info: "Christina 带着最新的开发者新闻和开源项目回来了！" }],
    }
  },
  components: {
    Login
  },
  created() {
    this.intervalNum = setInterval(() => {
      this.infoIndex = (this.infoIndex + 1) % 4
    }, 3000)
    console.log('33333333333');
    GetProjectInfo().then(res => {
      console.log(res, '222222');
    })
  },
  methods: {
    handleHomepage(path) {
      this.$router.push(path)
    },

    search() {
      console.log(this.Keywords,'this.Keywords');
      if (this.Keywords != '' )
        console.log(this.$refs.route,'this.$refs.route');
        this.$refs.route.seach(this.Keywords)
    },
    handleUserpage() {
      if (this.$cookies.get("userEmail") == "null" || this.$cookies.get("userPWD") == "null") {
        this.$refs.left3.nowLogin = true;
        return;
      }
      this.$router.push('/space/main')
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 打开登录弹窗
    open() {
      if (localStorage.getItem('isLogin')) return
      //先判断是否登录，如果登录了就不做操作，未登录则打开登陆弹窗
      this.isShow = true
    },
    // 关闭登录弹窗
    handleClose() {
      this.isShow = false
    },
  },
}
</script>

<style scoped>
::v-deep .el-submenu .el-menu-item {
  min-width: 0;
}

::v-deep .el-menu {
  border-right: none;
}

::v-deep .el-col-12 {
  width: 100%;
}

.contanier {
  display: flex;
}

.top {
  display: flex;
  height: 153px;
  width: 100%;
  align-items: end;
  background-color: #A18587;
  margin-bottom: 20px;
  background-image: url("../../public/wallhaven-0w91o6.jpg");
  box-shadow: inset rgba(0, 0, 0, 0.4) 0 -60px 20px -20px;
}

.carShadow {
  color: black;
  border-radius: 10px 10px 0 0;
  margin-bottom: 10px;
  opacity: 0.8;
  box-shadow: inset #676980 0 -50px 20px -20px;
}

.cover {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.bar {
  background: #DCDFE6;
  height: calc(100vh - 300px);
  border: 1px solid #E1E2E6;
}

.carousel {
  height: 490px;
  z-index: -1;
}

.search {
  margin-left: auto;
  box-sizing: border-box;
  vertical-align: top;
}

.search input {
  display: inline-block;
  width: 610px;
  border-radius: 5px;
  padding-right: 10px;
  margin-left: auto;
}

.search img {
  width: 20px;
  height: 20px;
  margin-left: -25px;
  vertical-align: middle;
}

.search input {
  outline: transparent;
  padding: 10px;

  border: #52ACA8 1px solid;
}

home-left1 {
  right: 0;
}


.left {
  display: inline-block;
  margin-left: 90px;
  width: 30%;
  padding-right: 13px;
}



.right {
  flex: 1;
}


.carContainer {
  height: 300px;
}

.carContainer span {
  display: inline-block;
  width: 100%;
  height: 100px;
  background: #676980;
  box-sizing: border-box;
  padding: 5px 230px 0 24px;
  font-family: "Microsoft YaHei";
  color: white;
  font-size: 18px;
  position: absolute;
  z-index: 9999;
  bottom: 0;
}

.carContainer img {
  height: 291px;
}

.carContainer el-carousel-item {
  z-index: 50;
  border-radius: 5px;
}

.el-carousel {
  z-index: -1;
}


.tabbar {
  display: flex;
  left: 160px;
  height: 40px;
  width: 100%;
  padding: 30px;
  padding-bottom: 10px;
}

.tabbar i {
  font-family: 新細明體-ExtB, Bold;
  font-size: 16px;
}

img {
  width: 100%;
  height: inherit;
}

.navli {
  font-style: normal;
  color: white;
  font-size: 15px;
  padding-right: 25px;
}

.navli:hover {
  cursor: pointer;
}
</style>
